<template>
  <div id="can1"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { init, use, dispose } from "echarts/core";
import { Bar3DChart } from "echarts-gl/charts";
import { Grid3DComponent } from 'echarts-gl/components'

let myChart = null
let can1 = null
onMounted(() => {
  use([CanvasRenderer, Grid3DComponent, Bar3DChart]);
  can1 = document.getElementById("can1");
  myChart = init(can1);
  let options = {
    xAxis3D: {
      type: 'category',
      data: ['d1', 'd2', 'd3', 'd4'],
      axisLine: {
        lineStyle: {
          color: 'red'
        }
      }
    },
    yAxis3D: {
      type: 'category',
      data: ['am', 'pm']
    },
    zAxis3D: {
      min: 10,
      max: 100
    },
    grid3D: {
      light: {
        // 主光源
        main: {
          color: 'white', 
          intensity: 0.4,  // 主光源强度 越弱越黑
          shadow: true,  // 阴影
          shadowQuality: 'low', // 阴影的质量  low | medium | high |ultra
          alpha: 25,  // 绕x轴的角度
          beta: 25,  // 绕y轴的角度，与alpha共同控制光源的方向
        },
        // 环境光源
        ambient: {
          
        }
      },
      viewControl: {
        distance: 200,
        alpha: 75,  // 绕x轴的角度
        beta: 65,  // 绕y轴的角度，与alpha共同控制光源的方向
        autoRotate: true,  // 自动旋转
      }
    },
    series: [
      {
          type: 'bar3D',
          data: [
              [0, 0, 40],
              [1, 0, 60],
              [2, 1, 80]
          ],
          shading: 'lambert',  // 三维柱状图中的着色效果  color | lambert | realistic
      }
    ]
  };
  myChart.setOption(options);
});

onUnmounted(() => {
  dispose(can1);
  myChart = null;
});
</script>

<style lang="less" scoped>
#can1 {
  width: 800px;
  height: 400px;
}
</style>
